import { onMounted } from "vue"
import { app } from "@/main"
import Control from "./control"
const DocName = import.meta.env.VITE_DOC_NAME
const docLayer = new Zondy.Map.Doc("", DocName, {})
const gaode_vector = new ol.layer.Tile({
  name:'ditu1',
  title: "矢量",
  source: new ol.source.XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
    wrapX: false,
    crossOrigin: "Anonymous"
  }),
})
const gaode_image = new ol.layer.Tile({
  name: 'ditu2',
  title: "影像",
  source: new ol.source.XYZ({
      url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
      wrapX: false,
      crossOrigin: "Anonymous"
  }),
  // opacity: 0.4
})
const controls = [
  Control.navControl(100, 30, 140, 30),
  Control.zoomSlider(),
  Control.fullScreenControl(),
  Control.scaleControl(),
  Control.overviewMapControl([gaode_image, gaode_vector]),
  Control.mousePositionControl()
]
const initMap = () => {
  onMounted(() => {
    const map = new ol.Map({
      target: "map",
      /* layers放置图层 data*/
      layers: [gaode_image,gaode_vector, docLayer],
      /* 设置地图的视图  center,zoom,坐标 */
      view: new ol.View({
        center: [114.377477, 30.491726],
        zoom: 13,
        projection: "EPSG:4326",
      }),
    })
    controls.forEach((control) => {
      map.addControl(control)
    })
    app.config.globalProperties.$map = map
  })
}

export { docLayer, gaode_vector, gaode_image, initMap }
